<template>
  <div class="vip-detail-info">
    <div class="info-card">
      <el-row :gutter="10">
        <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="7">
          <div class="app-main-content-box">
            <app-main-sub-title title="资产信息" />
            <ThreePointCard :data="balanceCard" />
          </div>
        </el-col>
        <!-- <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="7">
          <div class="app-main-content-box">
            <app-main-sub-title title="资产信息"></app-main-sub-title>
            <ThreePointCard :data="cardData_2"></ThreePointCard>
          </div>
        </el-col> -->
        <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="5">
          <div class="app-main-content-box">
            <app-main-sub-title title="注册信息" />
            <InfoListCard :data="registerCard" />
          </div>
        </el-col>

        <!-- <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="5">
          <div class="app-main-content-box">
            <app-main-sub-title title="微信信息" />
            <InfoListCard :data="wechatCard" />
          </div>
        </el-col> -->
      </el-row>
    </div>
  </div>
</template>

<script>
// 组件
import ThreePointCard from '@/views/vip/detail/components/ThreePointCard/index.vue'
export default {
  components: {
    ThreePointCard
  },
  props: {
    activeName: {
      type: String,
      require: true
    },
    vipDetail: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      // 卡片数据
      balanceCard: [],
      cardData_2: [
        "可用积分",
        "0",
        "累计获得",
        "0",
        "累计消费",
        "0",
        "冻结积分",
        "0"
      ],
      registerCard: [],
      wechatCard: [
        { name: '微信昵称', value: '无' },
        { name: '公众号OpenID', value: '无' },
        { name: '小程序OpenID', value: '无' }
      ]
    }
  },
  watch: {
    activeName(val) {
      if (val === 'info') {
        this.$emit('getVipDetail')
      }
    },
    vipDetail(val) {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    // 设置页面数据
    initData() {
      // console.log(this.vipDetail)
      // 赋值余额卡片
      this.balanceCard = [
        '总余额',
        this.$options.filters.parseNumberToThousands(
          this.vipDetail.totalBalance
        ),
        '实充余额',
        this.$options.filters.parseNumberToThousands(this.vipDetail.scBalance),
        '赠送余额',
        this.$options.filters.parseNumberToThousands(
          this.vipDetail.giftBalance
        )
      ]

      // 赋值注册信息
      this.registerCard = [
        { name: '注册时间', value: this.vipDetail.registerTime || '无'},
        {
          name: '最近消费时间',
          value:this.vipDetail.recentConsumeTime || '无'
        },
      ]
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .vip-detail-info {
    .info-card {
      .app-main-content-box {
        height: 250px;
        margin-bottom: 10px;
      }
    }
  }
</style>
